<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>crawl</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$.get("/demo/crawl/config.json", function(data){
				console.log(data);
				if(data && data.length>0){
					data.forEach(function(crawl){
						$.get("/demo/crawl/config.json?crawler="+crawl.name, function(steps){
							console.log(steps)
							
							var html = $('<div class="row"></div>');
							html.append('<div class="row"><div class="col-xs-2">'+crawl.name+'</div><div class="col-xs-3">'+ crawl.descr+'</div><div class="col-xs-6" onclick="runStep(\''+crawl.name+'\',1)">测试<span class="pull-right">查看日志  ===&gt;</span></div><div class="col-xs-1"><a href="http://115.28.229.158:9880/" target="_blank">logserver</a></div></div>')
							
							steps.forEach(function(step){
								html.append('<div class="row"><div class="col-xs-2">'+step.level+'：'+step.name+'</div><div class="col-xs-3">'+ step.descr+'</div><div class="col-xs-6">'+step.url+'</div><div class="col-xs-1" onclick="runStep(\''+crawl.name+'\',\''+step.name+'\')">测试 '+step.level+'</div></div>')
							})
							html.append('<div class="row"><div class="col-xs-1"><input class="form-control" placeholder="level"></div><div class="col-xs-1"><input class="form-control" placeholder="name"></div><div class="col-xs-3"><input class="form-control" placeholder="descr"></div><div class="col-xs-5"><input class="form-control" placeholder="url"></div><div class="col-xs-2" onclick="addConfig(this,\''+crawl.name+'\')">添加</div></div>');
							
							html.appendTo($('#container'))
						})
					})
				}
			});
		})
		
		function runStep(crawler, step) {
			console.log('runStep crawler: '+crawler+', step: '+step)
			$.get("/demo/crawl/exec.json?crawler="+crawler+"&step="+(!step?"":step), function(data){
				console.log(data)
			});
		}
		
		function addConfig(btn, crawl){
			var div = $(btn).parent();
			var name = div.find('input[placeholder="name"]').val();
			var descr = div.find('input[placeholder="descr"]').val();
			if(!name || !descr) return;
			var config = {'name':name,'descr':descr}
			if(crawl){
				var level = div.find('input[placeholder="level"]').val();
				var url = div.find('input[placeholder="url"]').val();
				if(!level || !url) return;
				config.level = level;
				config.url = url;
			}
			console.log(config)
			jQuery.post('/demo/crawl/config.json', {'crawler':!crawl ? '' : crawl, 'data':JSON.stringify(config)}, function(data){
				alert(JSON.stringify(data))
				location.reload()
			}, 'json');
		}
    </script>    
</head>

<body>
	<div class="container" id="container">
		
		<div class="row">
			<div class="col-xs-4"><input class="form-control" placeholder="name"></div>
			<div class="col-xs-6"><input class="form-control" placeholder="descr"></div>
			<div class="col-xs-2" onclick="addConfig(this)">添加</div>
		</div>
	</div>
	
</body>
</html>